<template>
  <el-container class="container" v-loading="loading" element-loading-text="请稍后">
    <transition name="slide-fade" mode="out-in">
      <el-form v-if="current === 'login'" class="login-form" key="box1" size="small">
        <div class="logo-item">
          <img src="../../assets/logo_dark.png" class="logo-image">
          <span class="form-tips">登录</span>
        </div>
        <el-form-item label="用户名" class="form-item">
          <el-input v-model="user.username" prefix-icon="el-icon-arrow-right"></el-input>
        </el-form-item>
        <el-form-item label="密码" class="form-item">
          <el-input v-model="user.password" prefix-icon="el-icon-arrow-right" type="password" @keyup.enter.native="login"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="current='register'" class="register-btn" icon="el-icon-arrow-up">注 册</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="default" @click="login" class="login-submit-btn" icon="el-icon-check">登 录</el-button>
        </el-form-item>
        <div class="form-footer">
          <router-link to="/customer">返回首页</router-link>
          <router-link to="/customer">忘记密码?</router-link>
        </div>
      </el-form>
      <el-form v-if="current === 'register'" class="login-form" key="box2" size="small">
        <div class="logo-item">
          <img src="../../assets/logo_dark.png" class="logo-image">
          <span class="form-tips">注册</span>
        </div>
        <div class="avatar-box">
          <el-upload
            class="avatar-uploader"
            :action="this.$common.getApiUrl(this.$common.ELE_MONKEY_SERVER_URL.BASE, this.$common.ELE_MONKEY_API.UPLOAD_FILE)"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload">
            <img v-if="imageUrl" :src="imageUrl" class="avatar">
            <div v-else class="upload-tips-box">
              <i class="el-icon-plus avatar-uploader-icon"></i>
            </div>
          </el-upload>
        </div>
        <el-form-item label="用户名">
          <el-input v-model="user.username" prefix-icon="el-icon-arrow-right"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="user.password" prefix-icon="el-icon-arrow-right" type="password"></el-input>
        </el-form-item>
        <el-form-item label="确认密码">
          <el-input v-model="user.confirmPassword" prefix-icon="el-icon-arrow-right" type="password" @keyup.enter.native="register"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" class="register-btn" icon="el-icon-check" @click="register">注 册</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="default" @click="current='login'" class="login-submit-btn" icon="el-icon-arrow-left">返回登录</el-button>
        </el-form-item>
      </el-form>
    </transition>
  </el-container>
</template>

<script>
export default {
  name: 'CustomerLogin',
  data () {
    return {
      current: 'login',
      user: {
        username: '',
        password: '',
        confirmPassword: '',
        image: ''
      },
      imageUrl: '',
      loading: false
    }
  },
  methods: {
    login () {
      this.loading = true
      this.$customerAPI.user_login(this.user).then((params) => {
        this.loading = false
        this.$store.state.currentUser = {
          id: params.data['id'],
          username: params.data['username'],
          image: params.data['image']
        }
        if (this.$route.params['forward']) {
          switch (this.$route.params['forward']) {
            case 'order':
              this.$router.push('/customer/order')
              break
            case 'store':
              this.$router.push('/customer/store/' + this.$store.state.currentShoppingCart.store.id)
              break
            default:
              this.$router.back(-2)
          }
        } else {
          this.$router.push('/customer')
        }
      }).catch((params) => {
        this.loading = false
        this.$message(params.message)
      })
    },
    register () {
      if (this.user.password !== this.user.confirmPassword) {
        this.$message('您输入的密码不一致，请重新输入')
      } else {
        this.loading = true
        this.$customerAPI.user_register(this.user).then((params) => {
          this.loading = false
          this.$message({ type: 'success', message: '注册成功！' })
          this.login()
        }).catch((params) => {
          this.loading = false
          this.$message(params.message)
        })
      }
    },
    handleAvatarSuccess (res, file) {
      this.user.image = res
      this.imageUrl = URL.createObjectURL(file.raw)
    },
    beforeAvatarUpload (file) {
      const isJPG = file.type === 'image/jpeg' || file.type === 'image/png'
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG / PNG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    }
  }
}
</script>

<style scoped>
  .slide-fade-enter-active {
    transition: all .15s ease;
  }
  .slide-fade-leave-active {
    transition: all .15s cubic-bezier(1.0, 0.5, 0.8, 1.0);
  }
  .slide-fade-enter, .slide-fade-leave-to
    /* .slide-fade-leave-active for below version 2.1.8 */ {
    transform: translateX(100px);
    opacity: 0;
  }
  .container {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: url("../../assets/images/customer/login_bg.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }
  .login-form {
    width: 370px;
    padding: 50px 80px;
    border-radius: 10px;
    background-color: white;
  }
  .el-form-item {
    margin-bottom: 14px !important;
  }
  .login-submit-btn, .register-btn {
    width: 100%;
  }
  .register-btn {
    margin-top: 14px;
  }
  .logo-item {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 28px;
  }
  .logo-image {
    width: 240px;
  }
  .form-tips {
    font-size: 17px;
    margin-left: 15px;
    letter-spacing: 3px;
    color: rgba(0, 0, 0, 0.36);
  }

  .avatar-uploader {
    width: 80px;
    height: 80px;
    border-radius: 45px;
    border: 2px solid rgba(0, 0, 0, 0.35);
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader:hover {
    border-color: #f3b274;
  }
  .avatar-uploader-icon {
    font-size: 22px;
    width: 80px;
    text-align: center;
  }
  .avatar-box {
    width: 100%;
    margin: 22px 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .avatar {
    width: 80px;
    height: 80px;
    border-radius: 40px;
    box-sizing: border-box;
    display: block;
  }
  .upload-tips-box {
    width: 80px;
    height: 80px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #8c939d;
  }
  a {
    text-decoration: none;
    color: #a2a2a2;
  }
  .form-footer {
    margin-top: 22px;
    display: flex;
    justify-content: space-between;
    font-size: 14px;
  }
</style>
